<template>
  <basic-dialog
    :width="'40%'"
    :visible="visible"
    :title="'填写处理方式'"
    :handle-close="onCancel"
    :handleOpen="handleOpenDialog"
    :handle-ok="handleConfirm"
    :loadingBtn="confirmLoading"
  >
    <el-form
      ref="dealForm"
      :model="dealForm"
      :rules="formValidate"
      label-width="130px"
    >
      <el-form-item label="处理方式" prop="processingType">
        <el-select
          v-model.trim="dealForm.processingType"
          placeholder="请选择处理方式"
          @change="handleProcessingTypeChange"
        >
          <el-option
            v-for="item in processingModeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="remark">{{remark}}</span>
      </el-form-item>
      <el-form-item label="处理备注" prop="remark">
        <el-input
          type="textarea"
          v-model.trim="dealForm.remark"
          placeholder="输入处理备注"
        />
      </el-form-item>
      <el-form-item label="预计解决日期" prop="planSolveDate">
        <el-date-picker
          v-model="dealForm.planSolveDate"
          type="date"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
          placeholder="选择预计解决日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import { dealStockService, queryRemarkListService } from '@api/stock/stockOverflow';

export default {
  components: {
    BasicDialog
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    selectList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < new Date().getTime() - 86400000;
        }
      },
      confirmLoading: false,
      dealForm: {
        processingType: '',
        remark: '',
        planSolveDate: ''
      },
      remark: '',
      formValidate: {
        processingType: [
          { required: true, message: '请选择处理方式', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入处理备注', trigger: 'blur' }
        ],
        planSolveDate: [
          { required: true, message: '请选择预计解决日期', trigger: 'change' }
        ]
      },
      processingModeOptions: []
    };
  },
  computed: {
    visible () {
      return this.dialogVisible;
    },
    idList () {
      return this.selectList.map((item) => item.id);
    }
  },
  methods: {
    handleProcessingTypeChange (val) {
      this.remark = this.processingModeOptions.find(item => item.value == val).remark
    },
    emptyForm () {
      this.dealForm = {};
      this.remark = '';
    },
    onCancel () {
      if (this.$refs.dealForm) {
        this.$refs.dealForm.resetFields();
        this.emptyForm();
      }
      this.$emit('hide-handler');
    },
    handleOpenDialog () {
      this.queryProcessOptions()
    },
    async queryProcessOptions () {
      const res = await queryRemarkListService(
        { type: 1 },
        state => { this.confirmLoading = state }
      );
      if (res?.retData) {
        this.processingModeOptions = res.retData;
      }
    },
    handleConfirm (errorData) {
      console.log(errorData)
      this.$refs['dealForm'].validate((valid) => {
        if (valid) {
          const param = {
            idList: errorData.length ? this.idList.filter(item => !errorData.includes(item)) : this.idList,
            ...this.dealForm
          };
          this.dealStock(param);
        }
      });
    },
    async dealStock (param) {
      const res = await dealStockService(param, state => { this.confirmLoading = state })
      if (res) {
        if (res.retData) {
          const { idList, skuNoList } = res.retData;
          if (idList.length == this.idList.length) {
            return this.$message.error('所选商品处理方式不能选择留存销售，请选择其他方式')
          }
          this.$confirm(`部分商品异常:${skuNoList}`, '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '清空异常商品并提交',
            dangerouslyUseHTMLString: true,
            customClass: 'abnormal-tips'
          })
            .then(() => {
              this.handleConfirm(idList)
            })
            .catch(() => {});
        } else {
          this.$message.success('操作成功')
          this.$emit('handle-confirm');
          this.onCancel();
        }
      }
    }
  }
};
</script>
<style scoped>
.el-select, .el-date-editor.el-input {
  width: 100%;
}
.remark {
  color: #f14d4d;
}
</style>
